<template>
	<div class="tabArea">
		<el-radio-group v-model="activeName" @change="tabChange">
			<el-radio
				:label="item.name"
				v-for="(item, index) in dataTrigger"
				:key="index"
				:text-color="textColor"
				>{{ item.label }}</el-radio
			>
		</el-radio-group>
	</div>
</template>

<script>
export default {
	name: "CTabs",
	props: {
		props: {
			type: Array,
			default: function() {
				return [
					{
						fields: [],
					},
				];
			},
		},
	},
	computed: {
		dataTrigger: {
			get() {
				if (this.props[1].fields[0].value.dataJson.json) {
					let result = this.props[1].fields[0].value.dataJson.json;
					return this.getResult(result);
				}
				return [];
			},
			set(val) {},
		},
		cycleData() {
			return this.props[0].fields[3].value[0].value.value;
		},
	},
	data() {
		return {
			activeName: "",
			textColor: "",
			timer: null,
		};
	},
	methods: {
		// 清除计时器
		clearInterval() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		startInterval() {
			let index = 0;
			this.activeName = this.dataTrigger[index].name;
			this.timer = setInterval(() => {
				index++;
				if (index > this.dataTrigger.length - 1) {
					index = 0;
				}
				this.activeName = this.dataTrigger[index].name;
			}, 10000);
		},
		getResult(json) {
			let jsonArray = [];
			try {
				jsonArray = JSON.parse(json);
			} catch (e) {
				console.warn(e.message);
			}
			let model = this.props[1].fields[0].value.dataJson.model;
			let fieldHref = model[0].field;
			let mappingHref = model[0].mapping;
			let keyHref = mappingHref || fieldHref;

			let fieldTitle = model[1].field;
			let mappingTitle = model[1].mapping;
			let keyTitle = mappingTitle || fieldTitle;

			if (jsonArray.length > 0) {
				let outJson = [];
				jsonArray.forEach((element) => {
					outJson.push({
						name: element[keyHref],
						label: element[keyTitle],
						componentId: element.componentId ? element.componentId : "",
					});
				});
				return outJson;
			} else {
				return jsonArray;
			}
		},
		tabChange(val) {},
	},
	mounted() {
		if (this.cycleData) {
			this.startInterval();
		}
	},
	beforeDestroy() {
		this.clearInterval();
	},
	watch: {
		cycleData(newValue) {
			if (!newValue) {
				this.clearInterval();
			} else {
				this.startInterval();
			}
		},
		dataTrigger: {
			handler(val) {
				let componentIds = val.map((item) => item.componentId);
				componentIds.forEach((item) => {
					let dom = document.querySelector("div[_id='" + item + "']");
					dom.style.display = "none";
				});
				let obj = val.find((item) => item.name === this.activeName);
				let componentId = obj.componentId;
				if (componentId) {
					document.querySelector(
						"div[_id='" + componentId + "']"
					).style.display = "block";
				}
			},
			deep: true,
		},
		activeName: {
			handler(newVal, oldValue) {
				let Oldobj = this.dataTrigger.find((item) => item.name === oldValue);
				let oldcomponentId = "";
				if (Oldobj) {
					oldcomponentId = Oldobj.componentId;
				}
				if (oldcomponentId) {
					document.querySelector(
						"div[_id='" + oldcomponentId + "']"
					).style.display = "none";
				}
				let obj = this.dataTrigger.find((item) => item.name === newVal);
				let componentId = obj.componentId;
				if (componentId) {
					document.querySelector(
						"div[_id='" + componentId + "']"
					).style.display = "block";
				}
			},
			immediate: true,
		},
	},
};
</script>
<style lang="stylus" scoped>
.tabArea {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
>>> {
	.el-radio__label {
		color: #fff;
	}
}
</style>
